<template>
  <div>
    <tableComponents
      :pagination="{currentPage,pageSize:pagesize,total:tableData.all_num}"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      @sendUserSearch="get_search"
      :searchData="userSearchData"
      :isHaveExport="false"
      @toAdd="get_data('更新')"
      addText='更新'
      addIcon='el-icon-s-claim'
    >
      <template v-slot:table>
        <el-table
          v-loading="loading"
          :data="tableData.data"
          ref="multipleTable"
          stripe
          header-row-class-name="head_color"
          tooltip-effect="dark"
          style="width: 99.8%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" class="tc" width="35"></el-table-column>
          <el-table-column label="商品图片" width="100" align="center">
            <template slot-scope="scope">
              <div class="img_bor">
                <img :src="$fnc.getImgUrl(scope.row.piclink)" alt />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="标题" min-width="180">
            <template slot-scope="scope" style="vertical-align: text-top;">
              <div class="tab_div">
                <div>{{scope.row.title}}</div>
                <div>
                  <span></span>
                  <span class="rat" v-show="scope.row.is_exchange=='1'">积分兑换</span>
                  <span class="rat mar_lf_15" v-show="scope.row.is_publicflat=='1'">公排</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="售价" min-width="120">
            <template slot-scope="scope">
              <div class="tab_div">
                <div>
                  <span>商品价格：</span>
                  <span>{{scope.row.price | keepTwoNum}}</span>
                </div>
                <div>
                  <span>商品月销量：</span>
                  <span>{{scope.row.month_sale | keepTwoNum}}</span>
                </div>
                <div>
                  <span>收入比例：</span>
                  <span>{{(scope.row.income_percent) | keepTwoNum }}</span>
                </div>
                <div>
                  <span>佣金：</span>
                  <span>{{(scope.row.commission) | keepTwoNum }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="卖家信息" min-width="150">
            <template slot-scope="scope">
              <div class="tab_div">
                <div>
                  <span>卖家旺旺：</span>
                  <span>{{scope.row.seller}}</span>
                </div>
                <div>
                  <span>店铺名称：</span>
                  <span>{{scope.row.seller_shop}}</span>
                </div>
                <div>
                  <span>平台类型：</span>
                  <span>{{scope.row.seller_platform}}</span>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="优惠券" min-width="150">
            <template slot-scope="scope">
              <div class="tab_div">
                <div>
                  <span>优惠券总量：</span>
                  <span>{{scope.row.coupon_all}}</span>
                </div>
                <div>
                  <span>优惠券剩余量：</span>
                  <span>{{scope.row.coupon_left}}</span>
                </div>
                <div>
                  <span>优惠券面额：</span>
                  <span>{{scope.row.coupon_value}}</span>
                </div>
                <div>
                  <span>优惠券开始时间：</span>
                  <span>{{scope.row.coupon_start_time}}</span>
                </div>
                <div>
                  <span>优惠券结束时间：</span>
                  <span>{{scope.row.coupon_end_time}}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="220">
            <template slot-scope="scope">
              <el-row class="myblank">
                <el-button
                  :loading="$store.state.isLoading"
                  @click="gotolink(scope.row.tbk_link)"
                  size="mini"
                  type="primary"
                >淘宝网链接</el-button>
                <el-button
                  :loading="$store.state.isLoading"
                  @click="gotolink(scope.row.coupon_link)"
                  size="mini"
                >优惠券链接</el-button>
                <el-button
                  :loading="$store.state.isLoading"
                  @click="gotolink(scope.row.share_coupon_link)"
                  size="mini"
                >商品优惠券推广链接</el-button>
                <el-button
                  :loading="$store.state.isLoading"
                  size="mini"
                  type="danger"
                  @click="deleteTbItem(scope.row.id)"
                >删除</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>
  </div>
</template>
<script>
import { tbinfoSearchData } from "@/assets/js/searchData/searchData"; //引入搜索的数据
export default {

  props: [],
  data() {
    return {
      userSearchData: tbinfoSearchData,
      tableData: [],
      currentPage: 1, //初始页
      pagesize: 10, //    每页的数据
      item: {
        show: 1
      },
      loading: true,
      or_search: false,
      searchAll: {}
    };
  },
  methods: {
    handleSizeChange(val) {
      var params = this.searchAll;
      params.page = "";
      params.page_size = val;
      this.getNewsAll(params);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.$router.push(this.$route.path + "?page=" + val);
    },
    get_data(str) {
      this.loading = true;
      var params = this.searchAll;
      params.page = this.$route.query.page || 1;
      params.page_size = this.pageSize;
      if (str == "更新") {
        this.searchAll = {};
        params.page = 1;
        this.currentPage = 1;
      } else {
        this.currentPage = Number(this.$route.query.page) || 1;
      }
      this.$api.getShops.getTbCoupon(params).then(res => {
        this.tableData = res.data.result;
        this.loading = false;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    deleteTbItem(id) {
      this.$swal({
        title: "您确定要删除这条信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思"
      }).then(willDelete => {
        if (willDelete.value) {
          var data = { id_str: id };
          this.$api.getShops.delTbCoupon(data).then(res => {
            if (res.data.code == 200) {
              this.$swal("删除成功！", "您已经删除了这条信息。", "success");
              // this.$store.dispatch('getShopsAll',this.searchAll);
              this.get_data();
            } else {
              this.$swal("删除失败！", "出错啦！", "success");
            }
          });
        }
      });
    },
    gotolink(url) {
      window.open(url, "_blank");
    },
    get_search(data) {
      this.searchAll = data;

      this.get_data(data);
      this.or_search = true;
    }
  },
  beforeCreate() {
    this.loading = true; //数据未加载之前调用loading
  },
  created() {
    // this.$store.dispatch('get_data',this.item)
    this.loading = false;
    this.get_data();
  },
  computed: {},
  watch: {
    $route() {
      this.get_data();
    }
  }
};
</script>
